<template>
  <div class="list">
    <!-- 卡片试图 -->
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="15">
        <el-col :span="1" class="course_name">
          <div>学科名称</div>
        </el-col>
        <el-col :span="6">
          <el-input v-model="input"></el-input>
        </el-col>
        <el-col :span="1">
          <el-button @click="empty">清除</el-button>
        </el-col>
        <el-col :span="11" class="seek">
          <el-button type="primary" @click="SearchSubject">搜索</el-button>
        </el-col>
        <el-col :span="1">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            class="ss"
            @click="addsubjectdialogVisible = true"
            >新增学科</el-button
          >
        </el-col>
      </el-row>
      <!-- 显示多少数据 -->
      <div class="datas">
        <i class="el-alert__icon el-icon-info"></i>
        数据一共{{ tableData.length }}条
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">{{ tiem }} </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isFrontDisplay == 1 ? '是' : '否' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text">学科分类</el-button>
            <el-button type="text">学科标签</el-button>
            <el-button type="text" @click="modification(scope.row)"
              >修改</el-button
            >
            <el-button type="text" @click="deleteCourse(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增文章弹出层 -->
    <el-dialog
      title="新增学科"
      :visible.sync="addsubjectdialogVisible"
      width="26%"
      :before-close="handleClose"
      @close="addclose"
    >
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="addruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="ruleForm.subjectName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 开关显示按钮 -->
      <span class="whetherShow"> 是否显示</span>
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <!-- 关闭弹窗按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addsubjectdialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="addSubject" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--/ 新增文章弹出层 -->
    <!-- 修改文章弹出层 -->
    <el-dialog
      title="修改学科"
      :visible.sync="modificationdialogVisible"
      width="26%"
      :before-close="handleClose"
      @close="addclose"
    >
      <!-- 表单 -->
      <el-form
        :model="modificationruleForm"
        ref="addruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="modificationruleForm.subjectName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 开关显示按钮 -->
      <span class="whetherShow"> 是否显示</span>
      <el-switch
        v-model="altervalue"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <!-- 关闭弹窗按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="modificationdialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="modificationsubject" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--/ 修改文章弹出层 -->
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { gettingdata, SearchSubject, addSubject } from '@/api/user'
export default {
  name: 'list',
  props: {},
  components: {},
  data() {
    return {
      input: '',
      tableData: [],
      tiem: '',
      // 添加科目
      addsubjectdialogVisible: false,
      modificationdialogVisible: false,
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      modificationruleForm: {
        subjectName: '',
        id: ''
      },
      value: true,
      altervalue: true,
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.gettingdata()
  },
  mounted() {},
  methods: {
    // 渲染页面
    async gettingdata() {
      try {
        const data = await gettingdata(this.tableData)
        console.log(data)
        this.tableData = data.data.items
        this.tiem = dayjs(this.tableData.addDate).format('YYYY-MM-DD hh:mm:ss')
      } catch (err) {
        this.$message({
          message: '数据请求失败',
          duration: 500,
          type: 'error'
        })
      }
    },
    // 搜索
    async SearchSubject() {
      if (this.input === '') {
        this.$message({
          message: '请输入搜索内容',
          duration: 500,
          type: 'error'
        })
      } else {
        try {
          const input = this.input
          console.log(input)
          const data = await SearchSubject(this.input)
          this.tableData = data.data.items
          console.log(data)
          this.$message.success('数据请求成功')
        } catch (err) {
          this.$message.error('数据请求失败')
        }
      }
    },
    // 清空表单
    empty() {
      this.input = ''
    },
    // 开关弹出层
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 监听添加学科弹框的关闭事件
    addclose() {
      this.$refs.addruleForm.resetFields()
    },
    // 添加学科发送请求
    async addSubject() {
      if (this.ruleForm.subjectName.length === 0) {
        return this.$message.error('请输入内容')
      }
      try {
        let isFrontDisplay = 1
        if (this.value === false) {
          isFrontDisplay = 0
        }
        // var params = new URLSearchParams()
        // params.append('subjectName', 'this.ruleForm.name')
        // params.append('isFrontDisplay', 'isFrontDisplay')
        console.log(isFrontDisplay)
        const data = await addSubject(this.ruleForm)
        console.log(data)
        this.tableData.push(data.config)
        console.log(data)
        this.gettingdata()
        this.addsubjectdialogVisible = false
      } catch (err) {
        this.$message.error('接口有问题 返回是500')
      }
    },
    // 修改课程获取当前数据
    modification(row) {
      this.modificationdialogVisible = true
      this.modificationruleForm.subjectName = row.subjectName
      this.modificationruleForm.id = row.id
    },
    // 修改课程
    async modificationsubject() {
      let isFrontDisplay = 1
      if (this.altervalue === false) {
        isFrontDisplay = 0
      }
      // console.log(isFrontDisplay);
      const subjectName = this.modificationruleForm.subjectName
      // console.log(subjectName);
      const id = this.modificationruleForm.id
      // console.log(id);
      try {
        const data = await this.$http.put('/subjects/' + id, {
          id: id,
          subjectName: subjectName,
          isFrontDisplay: isFrontDisplay
        })
        console.log(data)
        this.gettingdata()
        this.modificationdialogVisible = false
        this.$message.success('数据请求成功')
      } catch (err) {
        this.$message.error('数据请求失败')
      }
    },
    // 删除课程
    deleteCourse(row) {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await this.$http.delete('/subjects/' + row.id)
          console.log(data)
          this.gettingdata()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style scoped lang="less">
.course_name {
  width: 80px;
  color: #606266;
  line-height: 40px;
  font-size: 16px;
  vertical-align: middle;
  font-weight: bold;
  margin-right: -20px;
  width: 100px;
}
.seek {
  margin-left: 25px;
  margin-right: 130px;
}
.datas {
  margin-top: 10px;
  background-color: #f4f4f5;
  color: #909399;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  .el-alert__icon {
    font-size: 16px;
  }
}
/deep/ .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background-color: #409eff;
    border-radius: 10px 10px 0 0;
    line-height: 24px;
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-form-item__label {
    color: #606266;
    font-size: 14px;
    font-weight: 900;
    padding: 0 30px 0 0;
  }
  .el-input__inner {
    height: 35px;
  }
}
.whetherShow {
  color: #606266;
  font-size: 14px;
  font-weight: 900;
  padding: 0 30px 0 0;
  margin-left: 14px;
}
</style>
